import router from '@/router/index.ts'
import { ElMessage } from 'element-plus'
import { loginIn } from '@/api/user.js'
import { reactive, ref } from 'vue'

// 定义接口限制数据类型
interface PascaloginAllUserMessage {
    username: string;
    passwords: string;
    iphonenum: string;
    loginRes;
}
// 创建账号密码的绑定
const user: PascaloginAllUserMessage = reactive({
  username: '',
  passwords: '',
  iphonenum: null,
  loginRes: null
})
// 创建登录按钮的加载
const btmlod = ref(false)
// 本地账号密码的保存
const userMsg = JSON.parse(window.localStorage.getItem('user'))

const bodyStyle = ref({
  padding: '50px 20px 20px 20px'
})

export default function getLoginFunction () {
  // 返回注册页面
  function tounlogin () {
    router.push('/unlogin')
  }

  async function onSubmit () {
    if (user.username === '' || user.passwords === '' || user.iphonenum === '') {
      ElMessage.error('请填写完成所有信息在登陆')
    } else {
      try {
        btmlod.value = true
        const res = await loginIn(user)
        // 储存到本地
        if (res.data.massage) {
          window.localStorage.setItem('user', JSON.stringify(res))
          btmlod.value = false
          ElMessage.success({
            message: '登陆成功',
            type: 'success'
          })
          router.push('/')
        } else if (!res.data.massage) {
          btmlod.value = false
          ElMessage.error('登录失败，信息填写错误')
        }
      } catch (err) {
        console.log(err)
      }
    }
  }
  return {
    tounlogin,
    onSubmit,
    user,
    btmlod,
    bodyStyle,
    userMsg
  }
}
